import React, { useState, useEffect, useCallback }  from 'react'
import request from '@/utils/request'
import { Table, Button, Popconfirm, message } from 'antd'
function List(props){
    var url = props.match.path.split('/')[3];
    console.log("url",url);
    const [datalist, setData] = useState([])
    const [useraccount, setUseraccount] = useState([])
    const [pagesize, setPagesize] = useState(5)
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    useEffect(async () => {
        // console.log(45454545);
        // setUrl(function(){
        //     return props.match.path.split('/')[3]
        // })
        // console.log(url);
        // if (url !== 'edit' && url !== 'add') {
            const { data: { data } } = await request.get('/getuserlist/getuser',
             {
                params: {
                    page:page,
                    pagesize:pagesize,
                    // collectionName: url
                }
            }
            )
            setData(function () {
                return data
            })
        // }
        // console.log('data=', data)
        // this.setState({
        //     datalist: data.data.result,
        //     total: data.data.total,
        // })

    }, [])
    const editItem = useCallback((account) => {
        // const { history, location, match } = this.props;
        // console.log('editItem',id,match,location)
        console.log("LST", props, url);

        props.history.push(props.match.path.replace('/' + url, '') + `/edit/` + account);
        // props.history.push(props.match.path.replace('/' + url, '') + `/edit/` + id);
        // props.history.push(props.location.pathname)
        console.log("address", props.match.path.replace('/' + url, ''));
    }, [])
    const removeItem = useCallback(async (id) => {

        const useraccount = []
        useraccount.push(id)
        console.log(useraccount);
        // const { datalist } = this.state;
        
        const { data } = await request.delete(`/getuserlist/deleteuser`, 
             {data:{useraccount}}
        )

        if (data.code === 200) {
            //    this.setState({
            //        datalist:datalist.filter(item=>item._id !== id)
            //    })
            // message.success(data);
            // this.forceUpdate();
            const { data: { data } } = await request.get('/getuserlist/getuser',
             {
                params: {
                    // page:page,
                    // pagesize:pagesize,
                    // collectionName: url
                }
            }
            )
            setData(function () {
                return data
            })
        }
    }, [])
    const removeAllItem = useCallback(async () => {
        // console.log("selectIds",selectIds);
        const { data } = await request.delete(`/getuserlist/deleteuser`, {
            data: {useraccount}
        })
        if (data.code === 200) {
            //    this.setState({
            //        datalist:datalist.filter(item=>item._id !== id)
            //    })
            // message.success(data);
            // this.forceUpdate();
            const { data: { data } } = await request.get('/getuserlist/getuser',
             {
                params: {
                    // page:page,
                    // pagesize:pagesize,
                    // collectionName: url
                }
            }
            )
            setData(function () {
                return data
            })
        }
    })
    const columns = [
        {
            title: '用户昵称',
            dataIndex: 'username',

            render: text=><a>{text}</a>
        },
        {
            title: '用户账号',
            dataIndex: 'account',

            render: text => <a>{text}</a>,
        },
        {
            title: '用户密码',
            dataIndex: 'password',

            render: text => <a>{text}</a>,
        },
        {
            title: '用户类型',
            dataIndex: 'userTypes',

            render: text => <a>{text}</a>,
        },
        {
            title: '用户等级',
            dataIndex: 'level',

            render: text => <a>{text}</a>,
        },
        {
            title: '操作',
            width: 140,
            render: (row) => {
                return (
                    <>
                        {/* <Button type="primary" size="small" ghost >查看详情</Button> */}
                        <Button type="primary" size="small" ghost 
                        onClick={editItem.bind(null, row.account)}
                        >编辑</Button>

                        <Popconfirm title="确认删除" 
                        onConfirm={
                            () => {
                                removeItem(row.account)
                            }
                        }
                        >
                            <Button size="small" danger >删除</Button>

                        </Popconfirm>
                    </>
                    //</React.Fragment>
                )
            }
        }
    ]
    const rowSelection = {
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log('select', selectedRowKeys, selectedRows)
            setUseraccount(selectedRowKeys)
        }
    }
    const pagination = {
        size: "small",
        total: total,
        pageSize: pagesize,
        showTotal(total, range) {
            setTotal(function () {
                return total
            })
            return `共${total}条数据`
        },
        showSizeChanger: true,
        onChange: (page, pageSize) => {

            // console.log('onchange', page, pageSize)

            // setState()为异步修改
            setPagesize(
                 pageSize
            )
        }
    }
    return (
        <>
            <Popconfirm title="确认删除" 
            onConfirm={

                removeAllItem
            }
            >
                <Button size="small" danger >批量删除</Button>
            </Popconfirm>
            <Table rowKey="account" columns={columns} dataSource={datalist} rowSelection={rowSelection} pagination={pagination} />

        </>
    )
}

export default List;